<template>
	<view>
		<!-- #ifndef H5 || MP-ALIPAY -->
		<nav-bar backState="2000" fontColor="#FFF" :bgColor="['#1CBBB4','#8DC73F']" bgColorAngle="45" title="个人中心"></nav-bar>
		<!-- #endif -->
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="u-skeleton">
			
			<!-- #ifdef MP -->
			<!-- 登录 -->
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-t-30 u-p-b-30" @click="onTokenJump('../myUni/set')">
				<block v-if="!hasLogin">
					<view class="u-m-r-20 u-skeleton-circle"><u-avatar size="120"></u-avatar></view>
					<view class="u-flex-1 u-skeleton-rect"><view class="u-font-lg">登录</view></view>
				</block>
				<block v-if="hasLogin">
					<view class="u-m-r-20 u-skeleton-circle"><u-avatar :src="pic" size="120" :show-sex="true" sex-icon="man"></u-avatar></view>
					<view class="u-flex-1">
						<view class="u-font-18 u-p-b-20 u-skeleton-rect">{{userName}}</view>
						<view class="u-font-14 u-tips-color u-skeleton-rect">框架:uView</view>
					</view>
				</block>
				<view><u-icon name="arrow-right" color="#969799" size="28"></u-icon></view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<!-- 登录 -->
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-t-30 u-p-b-30" @click="onTokenJump('../myUni/set')">
				<block v-if="!hasLogin">
					<view class="u-m-r-20 u-skeleton-circle"><u-avatar size="120"></u-avatar></view>
					<view class="u-flex-1 u-skeleton-rect"><view class="u-font-lg">登录 / 注册</view></view>
				</block>
				<block v-if="hasLogin">
					<view class="u-m-r-20 u-skeleton-circle"><u-avatar :src="pic" size="120" :show-sex="true" sex-icon="man"></u-avatar></view>
					<view class="u-flex-1">
						<view class="u-font-18 u-p-b-20 u-skeleton-rect">{{userName}}</view>
						<view class="u-font-14 u-tips-color u-skeleton-rect">框架:uView</view>
					</view>
				</block>
				<view><u-icon name="arrow-right" color="#969799" size="28"></u-icon></view>
			</view>
			<!-- #endif -->
			
			<u-notice-bar type="warning" mode="horizontal" :list="news"></u-notice-bar>
			<view class="u-m-t-20 u-skeleton-rect">
				<u-cell-group>
					<u-cell-item icon="rmb-circle" title="支付" @click="onPageJump('../sdkDemo/pay')"></u-cell-item>
				</u-cell-group>
			</view>
			
			<view class="u-m-t-20 u-skeleton-rect">
				<u-cell-group>
					<u-cell-item icon="star" title="收藏" @click="onTokenJump('')"></u-cell-item>
					<u-cell-item icon="coupon" title="卡券" @click="onPageJump('../myUni/coupon')"></u-cell-item>
					<u-cell-item icon="heart" title="关注" @click="onTokenJump('')"></u-cell-item>
					<u-cell-item icon="grid" title="索引" @click="onPageJump('../myUni/indexList')"></u-cell-item>
					<u-cell-item icon="file-text" title="富文本" @click="onPageJump('../myUni/parse')"></u-cell-item>
					<u-cell-item icon="lock" title="设置密码" @click="onPageJump('../myUni/setPassword')"></u-cell-item>
					<u-cell-item icon="map" title="地图" @click="onPageJump('')"></u-cell-item>
				</u-cell-group>
			</view>
			
			<view class="u-m-t-20 u-skeleton-rect">
				<u-cell-group>
					<u-cell-item icon="setting" title="设置" @click="onPageJump('../myUni/set')"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<u-gap height="80" bg-color="#ededed"></u-gap>
		<!--骨架-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import zNavigation from '@/components/module/navigation.vue';
	export default {
		components: {
			zNavigation,
			...mapState(['userInfo'])
		},
		data() {
			return {
				hasLogin: false,
				pic: '',
				userName: '',
				news: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				loading: true, // 是否显示骨架屏组件
			}
		},
		//第一次加载
		onLoad(e) {
			console.log(this.$store.state.userInfo)
			// 隐藏原生的tabbar
			uni.hideTabBar();
			//个人数据
			this.info();
			// 通过延时模拟向后端请求数据，调隐藏骨架屏
			setTimeout(() => {
				this.loading = false;
			}, 2000)
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			//个人数据
			this.info();
		},
		methods: {
			info() {
				//个人数据
				this.hasLogin = this.$store.state.userInfo.token || "";
				this.pic = this.$store.state.userInfo.avatarUrl || "";
				this.userName = this.$store.state.userInfo.nickName || "";
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ededed;
}

.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	background-color: #fff;
}
</style>
